<template>
  <el-row>

    <el-row style="background-color:#545652;color:#d5d5d5;">
      <el-col :span="3" :xs="3">读书</el-col>
    <el-col :span="3" :xs="3">电影</el-col>
    <el-col :span="3" :xs="3">音乐</el-col>
    <el-col :span="3" :xs="3">同城</el-col>
    <el-col :span="3" :xs="3">阅读</el-col>
    <el-col :span="3" :xs="3">
    <el-dropdown placement="bottom">
      <span type="primary">
        更多<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu >
        <el-dropdown-item><i class="el-icon-phone"></i> 客服</el-dropdown-item>
      </el-dropdown-menu>
      
    </el-dropdown>
    </el-col>
    <el-col :span="3" :xs="3">
      <el-badge value="0">提醒</el-badge>
    </el-col>
    <el-col :span="3" :xs="3">用户</el-col>
    </el-row>

    <el-row style="background-color:#f0f3f5;">
      <el-col :span="24" style="padding-top:20px;">
        <el-row>
          <el-col :span="5" style="text-align:center;" :xs="24">
           <el-link style="font-size:25px;">观影小楼</el-link>
          </el-col>
           <el-col :span="10" :xs="12">
            
           
              
                 <el-form :model="form" inline >
               <el-form-item label="" size="small" prop="search">
                 <el-input type="text" :value="form.search" clearable  style="width:170%;" placeholder="搜索电影、电视剧、综艺">
                  <template slot="append">
                   <el-button type="primary" size="small"><i class="el-icon-search"></i></el-button>
                  </template>
                 </el-input>
               </el-form-item>
             </el-form>
           
           </el-col>
            <el-col :span="5" :push="2" :xs="24">
              <p>小楼昨夜</p>
              <p>又东风</p>
            </el-col>
        </el-row>
        <el-divider></el-divider>
      </el-col>
      
        <el-col :span="20" :xs="20">
          <el-row>
            <el-col :span="3" :xs="3">影讯</el-col>
            <el-col :span="3" :xs="3">电影</el-col>
            <el-col :span="3" :xs="3">电视剧</el-col>
            <el-col :span="3" :xs="3">排行榜</el-col>
            <el-col :span="3" :xs="3">分类</el-col>
            <el-col :span="3" :xs="3">影评</el-col>
            <el-col :span="3" :xs="3">榜单</el-col>
            <el-col :span="3" :xs="3">影报</el-col>
          </el-row>
        </el-col>
    </el-row>
    <el-row style="margin-top:50px;">
      <el-col :span="18" :xs="24">
        <el-row>
          <el-col :span="3" :xs="3"><strong>最近热门电影</strong></el-col>
          <el-col :span="2" :xs="3">热门</el-col>
          <el-col :span="2" :xs="3">最新</el-col>
          <el-col :span="3" :xs="3">小楼高分</el-col>
          <el-col :span="3" :xs="3">冷门佳片</el-col>
          <el-col :span="2" :xs="3">华语</el-col>
          <el-col :span="2" :xs="3">欧美</el-col>
          <el-col :span="2" :xs="3">日本</el-col>  
        </el-row>
        <el-divider></el-divider>
        <el-row>
         <el-col :span="24" :xs="24">

           <el-row>
             <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing:border-box;padding:10px;">
            <el-image src="/static/beicsj.jpg"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/zhiyys.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/congb.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/yinxr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/yinxr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
             </el-col>
           </el-row>
         </el-col>
          
           <el-col :span="24" :xs="24">

           <el-row>
             <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing:border-box;padding:10px;">
            <el-image src="/static/jiezt.jpg"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/xiaofr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/liezhu.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/mianyjm.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/shensm.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
             </el-col>
           </el-row>
         </el-col>

        <el-col :span="24" :xs="24">


 <el-row>
          <el-col :span="3" :xs="3"><strong>最近热门电影</strong></el-col>
          <el-col :span="2" :xs="3">热门</el-col>
          <el-col :span="2" :xs="3">最新</el-col>
          <el-col :span="3" :xs="3">小楼高分</el-col>
          <el-col :span="3" :xs="3">冷门佳片</el-col>
          <el-col :span="2" :xs="3">华语</el-col>
          <el-col :span="2" :xs="3">欧美</el-col>
          <el-col :span="2" :xs="3">日本</el-col>  
        </el-row>
        <el-divider></el-divider>
          <el-row>
             <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing:border-box;padding:10px;">
            <el-image src="/static/beicsj.jpg"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/zhiyys.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/congb.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/yinxr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/yinxr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
             </el-col>
           </el-row>
 <el-row>
             <el-col :span="20" :push="2" :xs="20">
                <el-col :span="4" :xs="4" style="border-sizing:border-box;padding:10px;">
            <el-image src="/static/jiezt.jpg"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/xiaofr.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/liezhu.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/mianyjm.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
          <el-col :span="4" :xs="4">
            <el-image src="/static/shensm.jpg"  style="border-sizing:border-box;padding:10px;"></el-image>
          </el-col>
             </el-col>
           </el-row>
          
        </el-col>
         
        </el-row>

        
      </el-col>
      <el-col :span="6" :xs="24">
        <h3>电影评分</h3>
        <p><strong>一周口碑榜</strong><span style="margin-left:20px;"><el-link>更多榜单</el-link></span>
        <el-divider></el-divider>
        </p>
        <el-row style="font-size:8px;">
          <el-col :span="24" :xs="24">
            <span>1</span>
            <span style="margin-left:15px;"><el-link>七号房的礼物</el-link></span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24" >
            <span>2</span>
            <span style="margin-left:15px;"><el-link>七号房的礼物</el-link></span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
            <span>3</span>
            <span style="margin-left:15px;"><el-link>七号房的礼物</el-link></span>
            <el-divider></el-divider>
          </el-col>
          <el-col :span="24" :xs="24">
            <span>4</span>
            <span style="margin-left:15px;"><el-link>七号房的礼物</el-link></span>
            <el-divider></el-divider>
          </el-col>
         
          <el-col :span="24" :xs="24">
            <span>5</span>
            <span style="margin-left:15px;"><el-link>七号房的礼物</el-link></span>
            <el-divider></el-divider>
          </el-col>
          <el-row>
            <el-col :span="24" :xs="24">
              <p><strong>热门小楼</strong></p>
              <el-divider></el-divider>
              <p><el-badge value="new">跟着电影去旅行</el-badge></p>
              <el-divider></el-divider>
              <p><el-badge value="hot" type="warning">美剧必看</el-badge></p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :xs="24">
              <p><strong>喜欢请收藏</strong></p>
              <el-divider></el-divider>
              <p>观影喜爱区</p>
              <p>小楼休息区</p>
              <p>个人邮箱:1256230450@qq.com</p>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24" :xs="24">
              <p><strong>关注我们</strong></p>
              
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
export default {
  data(){
    return {
      form:{
        search:""
      }
    }
  }
}
</script>
